<template>
  <div>
    <el-row class="row">
      <el-col :span="24" class="left"><h2>资源大全</h2></el-col>
      <el-col :span="24" class="left">
        <div class="input">
          <!-- <input type="text" placeholder="请输入要搜索的内容"> -->
          <el-input
            placeholder="当前搜索资源0个"
            v-model="search"
            clearable
            class="elinput"
          >
          </el-input>
          <button @click="btn">搜索</button>
        </div>
        
      </el-col>
    </el-row>

    <!-- <el-row class="el-top">
      <el-col :span="24" class="tag">
        <i class="el-icon-edit"> </i>
        <span>标签:</span>
        <span
          :class="{ active: index == isActive }"
          v-for="(item, index) in learn"
          :key="index"
          @click="showdifference(index)"
          >{{ item.major }}</span
        >
      </el-col>
      <el-col :span="24" class="tag span-btn">
        <div class="btn-one">
          <i class="el-icon-help"> </i>
          <span>排序:</span>
        </div>
        <div class="btn-two">
          <el-button-group>
            <el-button
              type="primary"
              native-type="button"
              v-for="(item, index) in title"
              :key="index"
              @click="switchtabs(index)"
              >{{ item.title }}</el-button
            >

          </el-button-group>
        </div>
      </el-col>
    </el-row> -->


    <!-- <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 252px">
          <div class="user-info">
            <img src="../assets/img/user.jpeg" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">{{ name }}</div>
              <div>{{ role }}</div>
            </div>
          </div>
          <div class="user-info-list">
            上次登录时间：
            <span>2021-5-01</span>
          </div>
          <div class="user-info-list">
            上次登录地点：
            <span>郑州</span>
          </div>
        </el-card>
        <el-card shadow="hover" style="height: 252px">
          <template #header>
            <div class="clearfix">
              <span>语言详情</span>
            </div>
          </template>
          Vue
          <el-progress :percentage="71.3" color="#42b983"></el-progress
          >JavaScript
          <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
          <el-progress :percentage="13.7"></el-progress>HTML
          <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-user-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">1234</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-message-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-s-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">5000</div>
                  <div>数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 403px">
          <template #header>
            <div class="clearfix">
              <span>待办事项</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >添加</el-button
              >
            </div>
          </template>

          <el-table :show-header="false" :data="todoList" style="width: 100%">
            <el-table-column width="40">
              <template #default="scope">
                <el-checkbox v-model="scope.row.status"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="scope">
                <div
                  class="todo-item"
                  :class="{
                    'todo-item-del': scope.row.status,
                  }"
                >
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="60">
              <template>
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
  },
  data() {
    return {
        isActive: "",
        search: "",
      ///////标签
      learn: [
        {
          index: 1,
          major: "文章",
        },
        {
          index: 2,
          major: "视频",
        },
        {
          index: 3,
          major: "书籍",
        },
        {
          index: 4,
          major: "项目实战",
        },
        {
          index: 5,
          major: "学习路线",
        },
        {
          index: 6,
          major: "文档",
        },
        {
          index: 7,
          major: "Java",
        },

        {
          index: 8,
          major: "JavaScript",
        },
        {
          index: 9,
          major: "TypeScript",
        },
        {
          index: 10,
          major: "C",
        },
        {
          index: 11,
          major: "C++",
        },

        {
          index: 12,
          major: "C#",
        },
        {
          index: 13,
          major: "Python",
        },
        {
          index: 14,
          major: "前端",
        },
        {
          index: 15,
          major: "后端",
        },
        {
          index: 17,
          major: "大数据",
        },
        {
          index: 18,
          major: "人工智能",
        },
        {
          index: 19,
          major: "大数据",
        },
        {
          index: 20,
          major: "物联网",
        },
        {
          index: 21,
          major: "小程序",
        },
        {
          index: 22,
          major: "Linux",
        },
        {
          index: 23,
          major: "算法",
        },
      ],
      //////排序
      title: [
        {
          index: 1,
          title: "更新时间",
        },
        {
          index: 2,
          title: "评价",
        },
        {
          index: 3,
          title: "收藏",
        },
      ],
    };
  },
  computed: {
  },
  methods: {
    ///搜索框进行搜素现有资源
    btn() {
      var search = this.searchDate;
      if (search) {
        this.searchDate = this.orderlist.filter((value) => {
          value.username.indexOf(this.search) !== 1;
        });
      }
    },

  },
  mounted() {

  },
})
export default class component extends Vue {
  // msg!: string;
}
</script>
<style lang="less">
.row {
  width: 100%;
  height: 120px;
  background: #fff;
  line-height: 50px;
}
.row .left {
  padding-left: 50px;
}
.row .input {
  width: 650px;
  height: 100%;
}
.elinput {
  width: 80% !important;
  height: 35px;
  outline: none;
  border-radius: 0px !important;
}
button {
  width: 100px;
  height: 40px;
  background-color: #2d8cf0;
  border: none;
  color: #fff;
  cursor: pointer;
}
.el-input {
  width: 80%;
}

// .el-top {
//   width: 100%;
//   background: #fff;
//   line-height: 50px;
// }
// .tag {
//   padding-left: 50px;
// }
// .tag span {
//   margin-right: 28px;
//   padding: 0 8px;
//   cursor: pointer;
// }
// /* 显示样式 */
// .active {
//   border-radius: 5%;
//   background-color: #1890ff;
//   color: #fff;
// }

// .btn-one {
//   float: left;
//   width: 90px;
//   height: 50px;
// }
// .btn-one span {
//   margin-right: 20px;
// }
// .btn-two {
//   float: left;
//   width: 400px;
//   height: 50px;
// }
// .span-btn .btn {
//   display: inline-block;
//   width: 50px;
//   height: 20px;
//   border: #1890ff solid 1px;
// }

</style>